<template>
  <el-dialog
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible="visible"
    :title="$t('vip.vip12')"
    width="700px"
  >
    <div>
      <!-- <h4>
        导入开户审核信息如要导出多用户多数据，即勾选多用户及以下菜单多字段；
        legalize_type 0 开户审核 2 入金审核 3 现场见面
      </h4> -->

      <h4>
        {{legalize_type==0?$t("openCheck.openCheck27"):legalize_type==2?$t("openCheck.openCheck28"):$t("openCheck.openCheck29")}}
      </h4>
      <div>
        <el-tree
          ref="tree"
          :data="allTreeData"
          show-checkbox
          node-key="id"
          :check-on-click-node="true"
          default-expand-all
          :props="defaultProps"
          @check="TreeClick"
        >
        </el-tree>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="info" plain @click="cancel">
        {{ $t("common.common1") }}
      </el-button>
      <el-button :loading="submitLoading" type="primary" plain @click="submit">
        {{ $t("common.common2") }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { outList, outExplode } from "@/api/openList/openCheck";

export default {
  props: ["legalize_type"],
  data() {
    return {
      visible: false,
      submitLoading: false,
      allTreeData: [],
      defaultProps: {
        children: "fields",
        label: "name_" + this.$store.state.settings.langTail,
      },
      treeSubData: [],
      ids: [],
    };
  },
  mounted(){
    console.log(this.legalize_type,'legalize_type')
  },
  methods: {
    init(user_type, ids) {
      this.ids = ids;
      outList({
        user_type,
      })
        .then((res) => {
          if (res.code == 10000) {
            this.visible = true;
            this.allTreeData = [
              {
                id: "全选",
                name_zh: "全选",
                name_en: "ALL",
                name_tc: "全選",
                fields: res.data,
              },
            ];
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    cancel() {
      this.visible = false;
    },
    TreeClick(data, node) {
      this.treeSubData = node.checkedKeys;
    },
    submit() {
      if (this.treeSubData.length == 0) {
        // 请勾选导出字段
        this.$message({
          message: this.$t("openCheck.openCheck10"),
          type: "warning",
        });
      } else {
        var userIds = this.ids.map((item) => {
          return item.id;
        });
        outExplode({
          ids: userIds.join(","),
          fields_id: this.treeSubData.join(","),
          all: this.treeSubData.includes("全选") ? 1 : 0,
          legalize_type:
            this.legalize_type == 0 ? undefined : this.legalize_type,
        })
          .then((res) => {
            if (res.code == 10000) {
              this.visible = false;
              window.open(res.data.url);
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((error) => {
            this.$message.error(error.Error);
          });
        // console.log(this.treeSubData, this.treeSubData.includes("全选"));
      }
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-right: 0;
}
::v-deep .el-tree-node {
  white-space: normal;
  padding: 3px 0;
}
h4 {
  line-height: 40px;
}
.el-tree-node__content{
  height: auto;
}
</style>